Debounce emitted events in React #1864
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Adds an event cache to the React integration for emitted events. Skips emitting events which were already emitted very recently. This fixes an endless rendering loop issue in cases where the user dispatched many change events in a small amount of time, e.g. via Browser autofill features. When that happened and the user also fed back the emitted data to JSON Forms, the user could end up in an endless update cycle of type A -> B -> A -> B... . This is now avoided.
This reverts commit e0e2e9a.
sdirix
changed the title
sdirix
force-pushed
the
react-unique-events
branch
from
c916e5f to
d6bde0f
Compare
AlexandraBuzila
approved these changes
Jan 13, 2022
There are some use cases in which a large amount of independent changes are performed in an extremely low amount of time, potentially leading to data loss or endless rerendering loops when using the React bindings. An example for such a use case is Chrome auto-fill which can cause JSON Forms to emit multiple change events before the parent component is rerendered. If the parent component feeds the emitted data back to JSON Forms then it will hand over not the latest data, but the previouslys emitted data first. JSON Forms recognizes that this is not the very recent data and will validate, rerender and emit a change event again, leading to the problematic behavior. To handle these edge cases in which many change events are sent in an extremely short amount of time we debounce them over a short amount of time. We debounce the emitted events instead of the incoming data as we don't know anything about the amount of work performed (and therefore time passed) on the emitted data.
sdirix
force-pushed
the
react-unique-events
branch
from
d6bde0f to
a9455d1
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There are some use cases in which a large amount of independent changes are
performed in an extremely low amount of time, potentially leading to data
loss or endless rerendering loops when using the React bindings.
An example for such a use case is Chrome auto-fill which can cause JSON Forms
to emit multiple change events before the parent component is rerendered. If
the parent component feeds the emitted data back to JSON Forms then it will
hand over not the latest data, but the previouslys emitted data first. JSON
Forms recognizes that this is not the very recent data and will validate,
rerender and emit a change event again, leading to the problematic behavior.
To handle these edge cases in which many change events are sent in an
extremely short amount of time we debounce them over a short amount of time.
We debounce the emitted events instead of the incoming data as we don't know
anything about the amount of work performed (and therefore time passed) on the
emitted data.